//tasks 数据结构
// let tasks = [
//     { id: 1, text: "睡觉", completed: false },
//     { id: 2, text: "吃饭", completed: true },
//     { id: 3, text: "打豆豆", completed: false }
// ]
let tasks=JSON.parse(window.localStorage.getItem('tasks'))||[]
console.log(tasks);

//获取元素
let addbtn = document.querySelector('.addtask .addbtn');
let inputText = document.querySelector('.addtask input');
let ul = document.querySelector('.tasklist ul');
let category = document.querySelector('.category');
let inputSearch = document.querySelector(".search input")

//事件添加
//window onload 事件
window.addEventListener('load', function () {
    // console.log("load")
    renderTasks(tasks);

})

//添加按钮 增加点击事件，获取按钮
addbtn.addEventListener('click', function () {
    if (inputText.value.trim() != "") {
        //不为空
        //数据添加
        //1.产生数据-task对象
        //数组最有一个值+1
        let id ;
        if (tasks.length) {
          id = tasks[tasks.length - 1].id + 1;
        } else {
            id=1
        }
        const task = {
            id: id, text: inputText.value, completed: false
        };
        //2.把对象放到tasks数组中
        tasks.push(task);
        //3.显示一下
        // console.log(tasks);
        //4.渲染
        renderTasks(tasks);
    } else {
        //输入框为空
        window.alert('请输入添加的信息')
    }
    saveToLoalStorage();

})

// category添加事件-filter 判断是哪个按钮--事件委托-函数封装
category.addEventListener('click', function (e) {
    if (e.target.tagName == "BUTTON") {
        //获取自定义属性中的值
        const filter = e.target.dataset.filter;
        //渲染
        renderTasks(filterTasks(tasks, filter))
    }

})

//搜索框enter后修改数据
inputSearch.addEventListener('keydown', function (e) {
    //按下回车键
    if (e.key == 'Enter') {
        //判断搜索框是否为空
        if (inputSearch.value.trim() != "") {
            //拿搜索框中的值和数组中美元素的text值进行搜索 得到一个数组
            let searchTasks = tasks.filter(task => task.text.includes(inputSearch.value.trim()))
            //渲染
            renderTasks(searchTasks)

        } else {
            //搜索框为空
            window.alert('请在输入框中输入搜索信息')
        }
    }
})

//使用事件委托处理删除操作
ul.addEventListener('click', function (e) {
    removeTask(e)
    changeStatus(e)
})

//函数
function renderTasks(tasks) {
    //任务列表的渲染
    //清空现有ul中html
    ul.innerHTML = '';
    tasks.forEach(task => {
        //创建一个元素
        const li = document.createElement('li');
        //修改元素的html内容
        li.innerHTML = `
                    <div class="left">
                        <input type="checkbox" data-id="${task.id}" ${task.completed ? 'checked' : ''}>
                        <span class="${task.completed ? '.checkbox:checked + span' : ''}" style="${task.completed ? 'text-decoration: line-through;' : ''}">${task.text}</span>
                    </div>
                    <div class="btn-group">
                        <button class="editBtn" data-id="${task.id}">编辑</button>
                        <button class="delBtn" data-id="${task.id}">删除</button>
                    </div>
                `;
        //修改li中checkbox的checked属性
        // const input = li.querySelector("input")
        // console.log(input)
        // input.checked = task.completed;
        // console.log(task.completed)
        //给每个按钮添加点击事件
        // const delBtn =li.querySelector(".delBtn")
        // const editBtn =li.querySelector(".editBtn")
        // //绑定删除函数
        // delBtn.onlick=()=>removeTask(task.id)
        // delBtn.addEventListener('click',function (e) {
        //     removeTask(task.id,e)
        // })
        //绑定编辑函数
        let editBtn = li.querySelector(".editBtn")
        editBtn.onclick = function (e) {
            showEditAlert(task.id, e.target.parentElement.parentElement.querySelector("span").innerText)
        }
        //把元素放到ul中
        ul.appendChild(li);
    });
    updateCount();
}

//分类过滤函数

//input:
/*
  功能：分类过滤函数
  输入：tasks-所有任务，filter[all,completed,uncompleted] 
  输出：过滤后的任务
*/
function filterTasks(tasks, filter) {
    switch (filter) {
        case "completed":
            return tasks.filter(task => task.completed)
        case "uncompleted":
            return tasks.filter(task => !task.completed)
        default:
            return tasks;
    }

}

//改变task的完成属性值
function changeStatus(e) {
    let li;
    if (e.target.nodeName == "INPUT") {
        //修改数据
        //获取task的id值
        const id = e.target.dataset.id
        console.log(id)
        const task = tasks.find(task => task.id == id)
        // 确保任务对象存在
        if (task) {
            console.log(task)
            console.log(e.target.checked)
            task.completed = e.target.checked
          
            //修改后面文本的样式
            e.target.parentElement.children[1].classList.toggle('line')
        } else {
            console.log('Task not found');
        }
        saveToLoalStorage();
        updateCount();

    }
}

//删除函数
function removeTask(e) {
    // //删除数据

    // //从数组中移除待办事项
    // // tasks.splice(id,1)
    // tasks= tasks.filter(task=>task.id!=id)
    // console.log(tasks)
    // //交互
    // // e.target是被点击的元素，在这里即为删除按钮
    // //我们需要找到这个按钮所在的li元素，并将其从DOM中移除
    // const li = e.target.parentElement.parentElement
    // li.remove()
    // //重新渲染
    // renderTasks(tasks)

    let li;
    if (e.target.nodeName == "BUTTON" && e.target.className == "delBtn") {
        //删除数据
        //获取task的id值
        const id = e.target.dataset.id
        tasks = tasks.filter(task => task.id != id)
        //交互
        //获取包含删除按钮的li元素
        li = e.target.parentElement.parentElement
        //自己删除自己
        // li.remove()
        //在父元素中删除孩子
        ul.removeChild(li)
        updateCount()
    }
    saveToLoalStorage();

}

// 更新
function updateCount() {
    //底部统计数据的渲染
    //生成统计数据
    let all = tasks.length;
    let completed = tasks.filter(task => task.completed).length;
    let uncompleted = all - completed;

    //修改对应元素的数据
    const spans = document.querySelectorAll('.footer span')
    spans[0].textContent = `全部${all}`;
    spans[1].textContent = `已完成${completed}`;
    spans[2].textContent = `未完成${uncompleted}`;
}

//把数据保存到本地的函数
function saveToLoalStorage() {
    localStorage.setItem('tasks',JSON.stringify(tasks))
    
}


//获取本地保存的函数
function getToLoalStorage() {
    return JSON.parse(localStorage.getItem('tasks'))
    
}